"use client";

import { useEffect } from "react";
import { SidebarLeft } from "~/components/sidebar/sidebar-left";
import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
import { useAuth } from "~/components/auth-provider";
import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";

interface LayoutContentProps {
  children: React.ReactNode;
}

export default function LayoutContent({ children }: LayoutContentProps) {
  const { user, isLoading } = useAuth();
  const router = useRouter();

  // Check authentication status
  useEffect(() => {
    if (!isLoading && !user) {
      router.push("/auth/sign-in");
    }
  }, [user, isLoading, router]);

  // Show loading state while checking auth or health
  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <Loader2 className="text-primary h-8 w-8 animate-spin" />
      </div>
    );
  }

  // Don't render anything if not authenticated
  if (!user) {
    return null;
  }

  return (
    <SidebarProvider>
      <SidebarLeft />
      <SidebarInset>
        <div className="bg-background">{children}</div>
      </SidebarInset>
    </SidebarProvider>
  );
}
